<template>
    <div class="file-view">
        <van-button class="close-icon" @click.stop="closeModel">
            <img src="~@/assets/images/catalogue-icons/close@2x.png"/>
        </van-button>
        <MaterialResPlayer
            mode="h5"
            :material="props.fileData"
            @loaded="onLoaded"
        />
    </div>
</template>

<script setup>
import { onBeforeUnmount, nextTick, onMounted } from 'vue';
import { MaterialResPlayer } from '@yanxiu/player';
import { useRoute } from 'vue-router';
import useReport from '@/hooks/useReport.js';

const route = useRoute();
const report = useReport();

const emit = defineEmits(['handle-full-screen']);

defineExpose({
    startRecord
})

const props = defineProps({
    fileData: {
        type: Object,
        default: () => {}
    },
    detail: {
        type: Object,
        default: () => {}
    },
    catalogueId: {
        type: [Number, String],
        default: ''
    },
    isBuyPerson: {
        type: Boolean,
        default: false
    }
})


async function startRecord () {
    await nextTick();
    report.startWatchTime();
    
    report.reportFn(route.params.moocId, props.detail.courseWareId);
}

// 文档/图片资源加载完成时触发
function onLoaded () {
    console.log('onLoaded');
    if (props.isBuyPerson) {
        startRecord();
    }
}

function closeModel () {
    emit('handle-full-screen', false);
}

onMounted(() => {
    console.log('onMounted---file');
})

onBeforeUnmount(() => {
    report.hbReport();
    report.endReportFn();
    report.endWatchTime();
})
</script>

<style lang="scss" scoped>
.file-view {
    height: 100%;
    position: relative;
    .close-icon {
        // float: right;
        position: fixed;
        // left: 0;
        left: 15px;
        top: 24px;
        padding: 10px;
        z-index: 1;
        background-color: transparent;
        border: none;
        overflow: hidden;
        img {
            width: 20px;
            height: 20px;
        }
    }
}
</style>